<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>可视化爬虫工具</title>
    <!-- 引入jquery -->
    <script src="../../node_modules/jquery/dist/jquery.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            display: flex;
            min-height: 100vh;
            font-family: Arial, sans-serif;
        }

        .sidebar {
            width: 200px;
            background-color: #2c3e50;
            color: white;
            padding: 20px 0;
            transition: width 0.3s;
            overflow: hidden;
        }

        .sidebar.collapsed {
            width: 50px;
        }

        .toggle-button {
            background: none;
            border: none;
            color: white;
            font-size: 24px;
            cursor: pointer;
            padding: 10px;
            text-align: left;
            width: 100%;
            display: block;
        }

        .menu-item {
            padding: 15px 25px;
            cursor: pointer;
            transition: background-color 0.3s;
            display: none;
        }

        .sidebar:not(.collapsed) .menu-item {
            display: block;
        }

        .menu-item:hover {
            background-color: #34495e;
        }

        .main-content {
            flex: 1;
            padding: 20px;
            background-color: #ffffff;
            color: #333333;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path fill="none" stroke="rgba(44, 62, 80, 0.1)" stroke-width="1" d="M10 0 L10 20 M0 10 L20 10 M5 5 L15 15 M15 5 L5 15"/></svg>');
            background-size: 20px 20px;
            background-repeat: repeat;
            position: relative;
        }

        .spider-animation {
            width: 100%;
            height: 400px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 20px;
            perspective: 1000px;
        }

        .spider {
            width: 250px;
            height: 250px;
            position: relative;
            animation: float 3s ease-in-out infinite;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path fill="%2375676d" d="M39.6 33.7s4.9 2.3 16.2-2c2.6-1-6.8 10.5-8.2 12.4c1.9-1.8 16.7-13.6 10.9-15.1c-3.6-.9-12.6 2.3-13.9 1.6z"/><path fill="%235b4c52" d="M39.1 33.7s6.3 1.1 15.6-2c2.7-.9-5.7 10.5-7.1 12.5c1.9-1.8 15.3-13.1 9.5-14.6c-3.6-.9-11.8 1.4-13 .8z"/><path fill="%2375676d" d="M19.4 30.6c-1.2.7-10.2-2.5-13.8-1.6c-5.8 1.5 9 13.3 10.9 15.1c-1.4-2-10.8-13.5-8.2-12.4c11.3 4.4 16.2 2 16.2 2z"/><path fill="%235b4c52" d="M20 30.3c-1.3.6-9.4-1.7-13-.8c-5.8 1.5 7.6 12.8 9.5 14.6c-1.4-2-9.8-13.4-7.1-12.5c9.2 3.1 15.6 2 15.6 2z"/><path fill="%23a6aeb0" d="M31 2h2v19.3h-2z" opacity=".6"/><path fill="%235b4c52" d="M49.7 32.7c0 6.7-7.9 11.2-17.7 11.2s-17.7-4.5-17.7-11.2C14.3 20.6 32 16.5 32 16.5s17.7 4.1 17.7 16.2"/><g fill="%23e24b4b"><path d="M40 22.8s-3.6-.9-8-.9s-8 .9-8 .9s3.6-3 8-3s8 3 8 3"/><path d="M40 25.3s-3.6-1.2-8-1.2s-8 1.2-8 1.2s3.6-3.5 8-3.5s8 3.5 8 3.5"/></g><path fill="%2375676d" d="M40.4 46.4s5.4 1.8 16.5-4.3c2.6-1.4-5.6 11.8-6.8 14C51.8 54 65.5 39.8 59.3 39c-3.9-.5-12.8 4.1-14.1 3.6z"/><path fill="%235b4c52" d="M39.8 46.4s6.7.3 15.9-4.2c2.7-1.3-4.4 11.7-5.7 13.9c1.7-2.2 14.1-15.7 7.9-16.4c-3.9-.5-12 3.1-13.4 2.6z"/><path fill="%2375676d" d="M18.9 42.5c-1.4.5-10.3-4-14.2-3.5c-6.2.8 7.5 15 9.2 17.2c-1.2-2.2-9.4-15.4-6.8-14c11.1 6.1 16.5 4.3 16.5 4.3z"/><path fill="%235b4c52" d="M19.5 42.3c-1.4.5-9.5-3-13.4-2.6c-6.2.8 6.1 14.3 7.9 16.4c-1.2-2.2-8.3-15.2-5.7-13.9c9.1 4.5 15.9 4.2 15.9 4.2z"/><path fill="%2375676d" d="M40.6 49.8s4.6 3.3 17 .8c2.9-.6-8.9 9.5-10.7 11.3c2.3-1.6 19.6-11 14-13.6c-3.6-1.6-14.4.1-15.6-.8z"/><path fill="%235b4c52" d="M40.1 49.6s6.3 2.3 16.4.7c2.9-.4-7.7 9.8-9.6 11.6c2.3-1.6 18.1-10.7 12.5-13.3c-3.6-1.5-13.4-.6-14.6-1.5z"/><path fill="%2375676d" d="M18.7 47.5c-1.2.9-12-.8-15.6.8c-5.6 2.7 11.7 12.1 14 13.7c-1.8-1.8-13.6-11.9-10.7-11.3c12.4 2.4 17-.8 17-.8z"/><path fill="%235b4c52" d="M19.2 47.1c-1.2.9-11 0-14.6 1.6c-5.7 2.6 10.2 11.7 12.5 13.3c-1.8-1.8-12.5-12.1-9.6-11.6c10.1 1.5 16.4-.7 16.4-.7z"/><path fill="%2375676d" d="M36.8 52.1S39.1 54.7 47 55c1.8.1-6.7 4.5-8.1 5.3c1.6-.6 13.4-3.9 10.4-6.3c-1.9-1.5-8.1-1.9-8.7-2.6z"/><path fill="%235b4c52" d="M36.5 51.9s3.5 2.3 9.8 2.8c1.8.1-6.1 4.8-7.4 5.7c1.6-.6 12.5-3.9 9.4-6.3c-1.9-1.5-7.4-2.2-8-2.9z"/><path fill="%2375676d" d="M23.4 51.3c-.6.7-6.8 1.1-8.7 2.6c-3.1 2.4 8.8 5.6 10.4 6.3c-1.4-.8-9.9-5.3-8.1-5.3c7.9-.3 10.2-2.9 10.2-2.9z"/><g fill="%235b4c52"><path d="M23.6 51c-.6.7-6 1.4-8 2.9c-3.1 2.4 7.8 5.7 9.4 6.3c-1.4-.8-9.3-5.5-7.4-5.7c6.3-.5 9.8-2.8 9.8-2.8z"/><ellipse cx="32" cy="43.9" rx="13.9" ry="11.2"/></g><ellipse cx="36.9" cy="43.1" fill="%23ffe62e" rx="4.3" ry="4.4"/><ellipse cx="36.9" cy="43.1" fill="%233f3438" rx="2.9" ry="3"/><ellipse cx="27.1" cy="43.1" fill="%23ffe62e" rx="4.3" ry="4.4"/><path fill="%233f3438" d="M30 43.1c0 1.7-1.3 3-2.9 3s-2.9-1.3-2.9-3s1.3-3 2.9-3s2.9 1.3 2.9 3"/><path fill="%23fff" d="M34.8 49.5c0-1-1.2-.2-2.8-.2s-2.8-.8-2.8.2s1.2 1.7 2.8 1.7s2.8-.8 2.8-1.7"/></svg>');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            cursor: pointer;
            transition: all 0.3s ease;
            transform-style: preserve-3d;
        }

        .spider-body,
        .spider-eyes,
        .eye,
        .eye::after,
        .legs,
        .leg {
            display: none;
        }

        @keyframes bounce {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-20px);
            }
        }

        .title {
            text-align: center;
            margin-bottom: 20px;
            color: #2c3e50;
        }

        .spider:hover {
            animation-play-state: paused;
            transform: scale(1.1) rotate(5deg);
            filter: drop-shadow(0 0 20px rgba(44, 62, 80, 0.4));
        }

        .spider:active {
            transform: scale(0.95) rotate(-5deg);
        }

        @keyframes float {
            0% {
                transform: translateY(0) rotate(0deg);
            }

            25% {
                transform: translateY(-15px) rotate(3deg);
            }

            50% {
                transform: translateY(0) rotate(0deg);
            }

            75% {
                transform: translateY(15px) rotate(-3deg);
            }

            100% {
                transform: translateY(0) rotate(0deg);
            }
        }

        .spider-animation:hover .spider {
            animation: none;
        }

        .spider::after {
            content: '';
            position: absolute;
            top: 180px;
            left: 50%;
            width: 300px;
            height: 300px;
            background: radial-gradient(circle, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 70%);
            transform: translate(-50%, -50%) translateZ(-1px);
            border-radius: 50%;
            pointer-events: none;
            opacity: 1;
            transition: opacity 0.3s ease;
        }

        .spider:hover::after {
            opacity: 1;
        }

        h1.title {
            text-align: center;
            margin-bottom: 20px;
            color: #2c3e50;
        }

        label {
            display: block;
            margin: 10px 0 5px;
            font-weight: bold;
            color: #2c3e50;
        }

        input[type="text"],
        textarea {
            width: calc(100% - 20px);
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 16px;
            transition: border-color 0.3s;
        }

        input[type="text"]:focus,
        textarea:focus {
            border-color: #2c3e50;
            outline: none;
        }

        textarea {
            height: 2cm;
            /* 设置文本区域高度 */
            resize: none;
            /* 禁止调整大小 */


        }

        #url {
            white-space: nowrap;
        }

        button {
            background-color: #2c3e50;
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
        }

        button:hover {
            background-color: #34495e;
            /* 悬停时的背景颜色 */
        }

        /* 更新按钮样式 */
        #create-task {
            background-color: #2c3e50;
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 16px;
            font-weight: bold;
            transition: all 0.2s ease;
            position: relative;
            box-shadow: 0 4px 6px rgba(44, 62, 80, 0.2);
            transform: translateY(0);
            margin-top: 10px;
        }

        #create-task:hover {
            background-color: #34495e;
            box-shadow: 0 6px 8px rgba(44, 62, 80, 0.3);
            transform: translateY(-2px);
        }

        #create-task:active {
            background-color: #2c3e50;
            box-shadow: 0 2px 4px rgba(44, 62, 80, 0.2);
            transform: translateY(1px);
        }

        /* 添加按钮点击波纹效果 */
        #create-task::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            transition: width 0.3s ease-out, height 0.3s ease-out;
            pointer-events: none;
        }

        #create-task:active::after {
            width: 100%;
            height: 100%;
            opacity: 0;
        }

        /* 更新警示框样式 */
        .alert {
            position: absolute;
            left: 50%;
            top: -100px;
            transform: translateX(-50%);
            padding: 15px 25px;
            background-color: #e74c3c;
            color: white;
            border-radius: 4px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            opacity: 0;
            transition: all 0.3s ease;
            z-index: 1000;
        }

        .alert.show {
            opacity: 1;
            top: 20px;
        }

        .category-field {
            margin-bottom: 15px;
        }

        .category-select-group {
            display: flex;
            gap: 10px;
        }

        .category-select-group select {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 16px;
            transition: border-color 0.3s;
            height: 42px;
            background-color: white;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right 10px center;
            background-size: 16px;
            padding-right: 30px;
        }

        .category-select-group select:focus {
            border-color: #2c3e50;
            outline: none;
        }

        #newCategory {
            background-color: #2c3e50;
            color: white;
            border: none;
            padding: 0 24px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 16px;
            font-weight: bold;
            transition: all 0.2s ease;
            position: relative;
            box-shadow: 0 4px 6px rgba(44, 62, 80, 0.2);
            transform: translateY(0);
            white-space: nowrap;
            height: 42px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #newCategory:hover {
            background-color: #34495e;
            box-shadow: 0 6px 8px rgba(44, 62, 80, 0.3);
            transform: translateY(-2px);
        }

        #newCategory:active {
            background-color: #2c3e50;
            box-shadow: 0 2px 4px rgba(44, 62, 80, 0.2);
            transform: translateY(1px);
        }

        /* 添加波纹效果 */
        #newCategory::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            transition: width 0.3s ease-out, height 0.3s ease-out;
            pointer-events: none;
        }

        #newCategory:active::after {
            width: 100%;
            height: 100%;
            opacity: 0;
        }

        .select-container {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .category-select-group select {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 16px;
            transition: border-color 0.3s;
            height: 42px;
            background-color: white;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right 10px center;
            background-size: 16px;
            padding-right: 30px;
        }

        .selected-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
            min-height: 30px;
        }

        .category-tag {
            display: inline-flex;
            align-items: center;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 12px;
            color: white;
            background-color: #1E9FFF;
            cursor: default;
        }

        .category-tag:nth-child(3n+1) {
            background-color: #1E9FFF;
        }

        .category-tag:nth-child(3n+2) {
            background-color: #009688;
        }

        .category-tag:nth-child(3n+3) {
            background-color: #FFB800;
        }

        .category-tag .remove {
            margin-left: 5px;
            cursor: pointer;
            font-size: 14px;
            opacity: 0.8;
        }

        .category-tag .remove:hover {
            opacity: 1;
        }

        .select-placeholder {
            color: #999;
            padding: 8px;
        }

        /* 添加模态框样式 */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
        }

        .modal-content {
            background: white;
            padding: 20px;
            border-radius: 8px;
            width: 300px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        .modal-content h3 {
            margin: 0 0 15px 0;
            color: #2c3e50;
        }

        .modal-content input {
            width: 100%;
            padding: 8px;
            /* margin-bottom: 15px; */
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 14px;
        }

        .modal-content input:focus {
            border-color: #2c3e50;
            outline: none;
        }

        .modal-buttons {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }

        .modal-buttons button {
            padding: 8px 15px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }

        .modal-cancel {
            background-color: #f5f5f5;
            color: #333;
            border: 1px solid #ddd;
        }

        .modal-cancel:hover {
            background-color: #e8e8e8;
        }

        .modal-confirm {
            background-color: #2c3e50;
            color: white;
            border: none;
        }

        .modal-confirm:hover {
            background-color: #34495e;
        }

        .category-manager {
            width: 400px !important;
        }

        .category-list {
            height: 200px; /* 改为固定高度 */
            overflow-y: auto;
            margin-bottom: 15px;
            border: 1px solid #eee;
            border-radius: 4px;
            padding: 10px;
        }

        /* 添加自定义滚动条样式 */
        .category-list::-webkit-scrollbar {
            width: 6px;
        }

        .category-list::-webkit-scrollbar-track {
            background: #f5f5f5;
            border-radius: 3px;
        }

        .category-list::-webkit-scrollbar-thumb {
            background: #ccc;
            border-radius: 3px;
        }

        .category-list::-webkit-scrollbar-thumb:hover {
            background: #999;
        }

        /* 优化类别项样式 */
        .category-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            border-bottom: 1px solid #eee;
            transition: background-color 0.2s;
        }

        .category-item:hover {
            background-color: #f9f9f9;
        }

        .category-item:last-child {
            border-bottom: none;
        }

        .category-text {
            flex: 1;
        }

        .delete-btn {
            padding: 4px 8px;
            background-color: #e74c3c;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
        }

        .delete-btn:hover {
            background-color: #c0392b;
        }

        .add-category {
            display: flex;
            gap: 10px;
            margin-bottom: 15px;
        }

        .add-category input {
            flex: 1;
        }

        .add-btn {
            padding: 8px 15px;
            background-color: #2c3e50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .add-btn:hover {
            background-color: #34495e;
        }

        /* 添加select下拉列表的样式 */
        .category-select-group select option {
            padding: 8px;
        }


        /* Firefox的滚动条样式 */
        .category-select-group select {
            scrollbar-width: thin;
            scrollbar-color: #ccc #f5f5f5;
        }

        /* Webkit的滚动条样式 */
        .category-select-group select::-webkit-scrollbar {
            width: 6px;
        }

        .category-select-group select::-webkit-scrollbar-track {
            background: #f5f5f5;
            border-radius: 3px;
        }

        .category-select-group select::-webkit-scrollbar-thumb {
            background: #ccc;
            border-radius: 3px;
        }

        .category-select-group select::-webkit-scrollbar-thumb:hover {
            background: #999;
        }

        /* 确保select选项的高度一致 */
        .category-select-group select option {
            padding: 8px;
            min-height: 24px;
            display: flex;
            align-items: center;
        }

        /* 设置下拉列表的样式 */
        .category-select-group select[size] {
            height: auto;
            max-height: 200px;
        }

        /* 设置下拉选项的样式 */
        .category-select-group select option {
            padding: 8px 10px;
            min-height: 1.2em;
            display: block;
        }

        /* 移除之前可能无效的样式 */
        .category-select-group select option[role="listbox"] {
            max-height: 200px !important;
        }
    </style>
</head>

<body>
<div class="sidebar collapsed">
    <button class="toggle-button">☰</button>
    <div class="menu-item" id="home">首页</div>
    <div class="menu-item" id="new-crawler">新建爬虫</div>
    <div class="menu-item" id="crawler-manage">爬虫管理</div>
</div>
<div class="main-content">
    <div class="home-content">
        <h1 class="title">可视化爬虫工具</h1>
        <div class="spider-animation">
            <div class="spider"></div>
        </div>
    </div>
    <div class="new-crawler-content" style="display: none;">
        <h1 class="title">新建爬虫</h1>
        <label for="task-name">任务名</label>
        <input type="text" id="task-name" placeholder="任务名"/>

        <!-- 修改类别选择区域的HTML结构 -->
        <div class="category-field">
            <label for="category">类别（最多选择3个）</label>
            <div class="category-select-group">
                <div class="select-container">
                    <select id="category">
                        <option value="">选择类别(最多三个)</option>

                    </select>

                    <div class="selected-tags"></div>
                </div>
                <button type="button" id="newCategory">编辑类别</button>
            </div>
        </div>

        <label for="url">网址</label>
        <textarea id="url" placeholder="例如: https://www.baidu.com/"></textarea>
        <label for="description">描述</label>
        <textarea id="description" placeholder=""></textarea>
        <button id="create-task">创建任务</button>
    </div>

</div>
<script>
    // 恢复初始内容
    function loadInitialContent() {
        $('.home-content').show();
        $('.new-crawler-content').hide();
        initSpiderAnimation(); // 重新初始化蜘蛛动画
    }

    // 加载新建爬虫内容
    function loadNewCrawlerContent() {
        $('.home-content').hide();
        $('.new-crawler-content').show();
    }

    // 初始化蜘蛛动画
    function initSpiderAnimation() {
        const $spider = $('.spider');
        const $spiderAnimation = $('.spider-animation');

        // 跟随鼠标移动效果
        $spiderAnimation.on('mousemove', function (e) {
            const rect = $(this)[0].getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;

            const centerX = rect.width / 2;
            const centerY = rect.height / 2;

            const deltaX = (x - centerX) / centerX;
            const deltaY = (y - centerY) / centerY;

            $spider.css('transform', `
                        translate(${deltaX * 30}px, ${deltaY * 30}px)
                        rotateX(${-deltaY * 20}deg)
                        rotateY(${deltaX * 20}deg)
                        scale(${1 + Math.min(Math.abs(deltaX), Math.abs(deltaY)) * 0.1})
                    `);
        });

        // 恢复原始位置
        $spiderAnimation.on('mouseleave', function () {
            $spider.css('transform', '');
            $spider.css('animation', 'float 3s ease-in-out infinite');
        });

        // 点击效果
        $spider.on('click', function () {
            $(this).css('animation', 'spin 0.5s ease-out');
            setTimeout(() => {
                $(this).css('animation', 'float 3s ease-in-out infinite');
            }, 500);
        });
    }

    function showAlert(message) {
        // 移除现有的警示框
        $('.alert').remove();

        // 创建新的警示框
        const $alert = $('<div class="alert">' + message + '</div>');
        $('body').append($alert);

        // 显示警示框
        setTimeout(() => {
            $alert.addClass('show');
        }, 10);

        // 3秒后隐藏警示框
        setTimeout(() => {
            $alert.removeClass('show');
            setTimeout(() => {
                $alert.remove();
            }, 300);
        }, 3000);
    }


    $(document).ready(function () {

        // 事件监听
        $('#home').on('click', loadInitialContent);
        $('#new-crawler').on('click', loadNewCrawlerContent);

        // 侧边栏切换
        $('.toggle-button').on('click', function () {
            $('.sidebar').toggleClass('collapsed');
        });

        // 初始化蜘蛛动画
        initSpiderAnimation();
    });

</script>
<!--用户js-->
<script src="home_render.js" type="module"></script>
</body>

</html>